<template>
    <div class="user-data__filter-item" v-if="customerType !== 'T'">
        <a-input v-model:value="blurry" allow-clear placeholder="编号/名称/账号" />
    </div>
    <div class="user-data__filter-item" v-if="customerType == 'T'">
        <a-tree-select
            v-model:value="areaCode"
            style="width: 100%"
            :tree-data="options"
            :replaceFields="{ title: 'areaName', key: 'id', value: 'areaCode', children: 'children' }"
            allow-clear
            :show-checked-strategy="'SHOW_PARENT'"
            :dropdownClassName="'yl-treeselect'"
            :placeholder="t('yl.pleaseSelect')"
            :load-data="loadData"
        />
    </div>

    <div class="user-data__filter-item" v-if="customerType == 'T'">
        <a-input v-model:value="blurry" allow-clear placeholder="门店名称" />
    </div>
    <div class="user-data__filter-item" v-if="customerType == 'T'">
        <a-input v-model:value="merchantCode" allow-clear placeholder="门店账号" />
    </div>
    <div class="user-data__filter-item">
        <a-select placeholder="状态" v-model:value="status" :allowClear="true">
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="2">冻结</a-select-option>
            <a-select-option value="3">删除</a-select-option>
        </a-select>
    </div>
    <div class="user-data__filter-item" v-if="customerType !== 'T'">
        <a-select placeholder="归属商户" v-model:value="parentCode" :allowClear="true">
            <a-select-option :value="item.id" v-for="(item, index) in MerchantList" :key="index">{{ item.name }}</a-select-option>
        </a-select>
    </div>
    <div class="user-data__filter-item">
        <yl-search-reset :loading="loading" @submit="handleSubmit" @reset="handleReset"></yl-search-reset>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, onMounted } from 'vue';
import ylDatePicker from '@/components/ylDatePicker.vue';
import ylSearchReset from '@/components/ylSeachReset.vue';
import { getArea, getMerchantPageData } from '@/api/merchant';

import { useI18n } from 'vue-i18n';

export default defineComponent({
    name: 'user-filter',
    components: {
        ylDatePicker,
        ylSearchReset,
    },
    props: {
        selectOptions: {
            type: Array,
            default: () => [],
        },
        customerType: {
            type: String,
            default: () => '1',
        },
        hideEnabled: {
            type: Boolean,
            default: () => false,
        },
    },
    emits: ['onSubmit', 'onReset'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const state = reactive({
            blurry: '',
            areaCode: null,
            parentCode: null,
            merchantCode: '',
            status: null,
            options: computed(() => props.selectOptions as NormalObj[]),
        });
        onMounted(() => {
            getMerchantPageDataData();
        });

        const loading = ref<boolean>(false);
        const customerType = computed(() => props.customerType);
        const MerchantList = ref([]);
        const handleSubmit = () => {
            let data = JSON.parse(JSON.stringify(state));
            delete data.options;
            emit('onSubmit', data);
        };
        const handleReset = () => {
            state.blurry = '';
            state.areaCode = null;
            state.parentCode = null;
            state.merchantCode = '';
            state.status = null;
            let data = JSON.parse(JSON.stringify(state));
            delete data.options;
            emit('onReset', data);
        };
        const loadData = (treeNode: { [x: string]: any }) => {
            return new Promise(async (resolve: (value?: unknown) => void) => {
                const { areaCode } = treeNode.dataRef;
                const params = {
                    parentAreaCode: areaCode,
                };
                const { content } = await getArea(params);
                if (!content.length) {
                    treeNode.dataRef.isLeaf = true;
                    return resolve();
                }
                content.forEach((item) => {
                    item.isLeaf = false;
                });
                treeNode.dataRef.children = content;
                resolve();
            });
        };

        // 获取table数据
        const getMerchantPageDataData = async () => {
            const { content, totalElements } = await getMerchantPageData();
            console.log(content);
            MerchantList.value = content;
        };
        return {
            ...toRefs(state),
            customerType,
            getMerchantPageDataData,
            MerchantList,
            loading,
            handleSubmit,
            handleReset,
            t,
            loadData,
        };
    },
});
</script>
<style lang="scss" scoped>
.user-data__filter-item {
    margin-right: $width20;
    &:last-child {
        margin-right: $width0;
    }
}
</style>
